<template>
  <div>
    <el-card
      class="box-card"
      style="
         {
          width: w + 'px';
        }
      "
    >
      <div slot="header" class="clearfix">
        <span>订单管理</span>
      </div>
      <div>
        <el-form :inline="true" :model="orderForm" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input
              v-model="orderForm.orderNo"
              placeholder="订单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input
              v-model="orderForm.consignee"
              placeholder="收货人"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="orderForm.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderForm.orderState" placeholder="订单状态">
              <el-option label="已受理" value="已受理"></el-option>
              <el-option label="派送中" value="派送中"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="orderForm.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="orderNo" label="订单号" width="150">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="consignee" label="收货人" width="120">
          </el-table-column>
          <el-table-column prop="deliverAddress" label="配送地址" width="300">
          </el-table-column>
          <el-table-column prop="deliveryTime" label="送达时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.deliveryTime | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="用户备注" width="120">
          </el-table-column>
          <el-table-column prop="orderAmount" label="订单金额" width="120">
          </el-table-column>
          <el-table-column prop="orderState" label="订单状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="check(scope.row)" type="text" size="small"
                >查看</el-button
              >
              <el-button type="text" size="small" @click="editBtn(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-drawer
      title="编辑订单"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <!-- 编辑表单 -->
      <el-form
        :model="editForm"
        status-icon
        :rules="rules"
        ref="editForm"
        label-width="100px"
        class="demo-editForm"
      >
        <el-form-item label="订单时间" prop="orderTime">
          <el-date-picker
            v-model="editForm.orderTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="this.oderDetails.pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            type="text"
            v-model="editForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="consignee">
          <el-input
            type="text"
            v-model="editForm.consignee"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="送货地址" prop="deliverAddress">
          <el-input
            type="text"
            v-model="editForm.deliverAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="送达时间" prop="deliveryTime">
          <el-date-picker
            v-model="editForm.deliveryTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="this.oderDetails.pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="text"
            v-model="editForm.remarks"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单金额" prop="orderAmount">
          <el-input-number
            v-model="editForm.orderAmount"
            :precision="2"
            :step="0.1"
            :max="100000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderState">
          <el-input
            type="text"
            v-model="editForm.orderState"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editOder">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 查看 -->
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
      <el-form :model="oderDetails">
        <p>订单号:{{ oderDetails.id }}</p>
        <p>下单时间:{{ oderDetails.orderTime | formatDate }}</p>
        <p>手机号:{{ oderDetails.phone }}</p>
        <p>收货人:{{ oderDetails.consignee }}</p>
        <p>送货地址:{{ oderDetails.deliverAddress }}</p>
        <p>送达时间:{{ oderDetails.deliveryTime | formatDate }}</p>
        <p>备注:{{ oderDetails.remarks }}</p>
        <p>订单金额:{{ oderDetails.orderAmount }}</p>
        <p>订单状态:{{ oderDetails.orderState }}</p>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { orderList, orderEdit } from "../../api/order";
import dayjs from "dayjs";
export default {
  data() {
    return {
      oderDetails: {
        pickerOptions: {
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
      },
      formLabelWidth: "120px",
      editForm: {},
      rules: {},
      drawer: false,
      dialogFormVisible: false,
      direction: "rtl",
      searchParams: {}, //搜索的参数
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      orderForm: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      w: document.body.clientWidth - 300, //表格的宽度
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    //确认编辑
    async editOder() {
      this.editForm.orderTime = dayjs(this.editForm.orderTime).format(
        "YYYY/MM/DD HH:mm:ss"
      );
      this.editForm.deliveryTime = dayjs(this.editForm.deliveryTime).format(
        "YYYY/MM/DD HH:mm:ss"
      );
      let res = await orderEdit(this.editForm);
      console.log(res);
      let { code, msg } = res;
      if (code === 0) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.drawer = false;
        this.orderData();
      }
    },
    //编辑
    editBtn(row) {
      this.drawer = true;
      this.editForm = { ...row };
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //查询
    onSubmit() {
      this.searchParams = { ...this.orderForm };
      this.searchParams.date = JSON.stringify(this.searchParams.date); //处理时间格式
      this.currentPage = 1;
      this.orderData();
    },
    //触发窗口函数
    resizeHandle() {
      this.w = document.body.clientWidth - 300;
    },
    //查看
    check(row) {
      this.dialogFormVisible = true;
      this.oderDetails = { ...row };
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.orderData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.orderData();
    },
    //获取数据
    async orderData() {
      let res = await orderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchParams,
      });
      this.tableData = res.data;
      this.total = res.total;
    },
  },

  //生命周期
  created() {
    //resize窗口大小发生改变触发的事件
    window.addEventListener("resize", this.resizeHandle);
    //调用函数,获取数据
    this.orderData();
  },
  beforeDestroy() {
    //注销窗口事件
    window.removeEventListener("resize", this.resizeHandle);
  },
  filters: {
    formatDate(val) {
      return dayjs(val).format("YYYY/MM/DD HH:mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
}
/deep/.rtl {
  width: 40% !important;
  .el-drawer__body {
    margin-right: 30px;
  }
}
/deep/.el-dialog__body {
  p {
    margin: 15px 0;
    font-size: 16px;
  }
}
</style>